<script lang="ts" setup>
  import { getRooms, putRoom, cancel, add } from '@/api/table/MeetingRoom';
  import { Duty } from '@/type';
  import { FormInst, useMessage } from 'naive-ui';
  import { onMounted, reactive, ref, watch } from 'vue';

  onMounted(() => {
    seacher();
  });
  const getRoom = ref<Array<any>>([]);
  //下拉框
  let snopt = reactive<Array<Duty>>([]);

  const seacher = async () => {
    getRooms().then((result) => {
      getRoom.value = result;
      snopt = [];
      result.forEach((e: { sn: string; id: string }) => {
        snopt.push({
          label: e.sn,
          value: e.id,
        });
      });
    });
  };

  watch(snopt, () => {
    // seacher()
  });

  const optionsValue = ref('请选择会议室');
  const valw = ref('');
  const valx = ref('');
  const optid = ref('0');
  // const putRooms = ref<Array<any>>([]);
  watch(optionsValue, () => {
    const id = optionsValue.value;
    optid.value = id;
  });
  const message = useMessage();

  //修改会议室
  const handlePositiveClick = async () => {
    const valws = valw.value;
    const optids = optid.value;
    const valxs = valx.value;
    if (optids == '0') {
      message.info('请选择要修改的会议室');
      return;
    } else if (valws == '') {
      message.info('请填写修改的会议室位置');
      return;
    } else if (valxs == '') {
      message.info('请填写修改的会议室型号');
      return;
    } else {
      await putRoom({ id: optids, position: valws, description: valxs });
      message.info('修改的会议室成功');
      valw.value = '';
      valx.value = '';
      seacher();
    }
  };

  //过滤空格
  const noSideSpace = (value: string) => !value.startsWith(' ') && !value.endsWith(' ');

  //删除会议室
  const cancell = async (id: number) => {
    await cancel({ id: id });
    seacher();
  };
  //新增会议室
  const formRef = ref<FormInst | null>(null);

  const model = ref({
    inputValue: null,
    inputValuePosition: null,
    inputValueDescription: null,
  });

  const rules = {
    inputValue: {
      required: true,
      trigger: ['blur', 'input'],
      message: '请输入会议室名称',
    },
    inputValuePosition: {
      required: true,
      trigger: ['blur', 'input'],
      message: '请输入会议室位置',
    },
    inputValueDescription: {
      required: true,
      trigger: ['blur', 'input'],
      message: '请输入会议室型号',
    },
  };
  //提交 验证

  const handleValidateButtonClick = (e: MouseEvent) => {
    e.preventDefault();
    formRef.value?.validate(async (errors) => {
      if (!errors) {
        message.success('验证成功');
        const valsns = model.value.inputValue;
        const valpos = model.value.inputValuePosition;
        const valdes = model.value.inputValueDescription;
        await add({ sn: valsns, position: valpos, description: valdes });
        (model.value.inputValue = null),
          (model.value.inputValuePosition = null),
          (model.value.inputValueDescription = null),
          seacher();
      }
    });
  };
  import { useDialog } from 'naive-ui';

  const messagea = useMessage();
  const dialog = useDialog();
  function handleButtonClick() {
    dialog.success({
      title: '确认申请',
      content: `确定要申请这个会议室？`,
      positiveText: '确定',
      negativeText: '不确定',
      maskClosable: false,
      onMaskClick: () => {
        messagea.success('请确认!');
      },
      onEsc: () => {
        messagea.success('退出申请');
      },
    });
  }
</script>
<template>
  <div>
    <n-card title="会议室" style="margin-bottom: 16px">
      <n-scrollbar x-scrollable class="mb-5">
        <div style="white-space: nowrap; padding: 24px">
          <div class="flex float-left">
            <n-layout
              embedded
              content-style="padding: 12px;"
              v-for="person in getRoom"
              :key="person.id"
            >
              <n-card>
                会议室名称：{{ person.sn }}<br />
                会议室位置：{{ person.position }}<br />
                会议室型号：{{ person.description }}<br />
                <div class="float-left mt-3">
                  <!-- <n-popconfirm @positive-click="cancell(person.id)">
                    <template #trigger>
                      <n-button>删除</n-button>
                    </template>
                    确定删除该会议室？
                  </n-popconfirm> -->
                  <n-button type="success" ghost @click="handleButtonClick">申请会议室</n-button>
                  <n-button type="error" ghost @click="cancell(person.id)">删除会议室 </n-button>
                </div>
              </n-card>
            </n-layout>
          </div>
        </div>
      </n-scrollbar>

      <n-tabs type="line" animated>
        <n-tab-pane name="the beatles" tab="新增会议室">
          <n-form
            ref="formRef"
            :model="model"
            :rules="rules"
            label-placement="left"
            label-width="auto"
            require-mark-placement="right-hanging"
            :style="{
              width: '40%',
            }"
          >
            <n-form-item label="会议室名称：" path="inputValue">
              <n-input v-model:value="model.inputValue" placeholder="请输入会议室名称" clearable />
            </n-form-item>
            <n-form-item label="会议室位置：" path="inputValuePosition">
              <n-input
                v-model:value="model.inputValuePosition"
                placeholder="请输入会议室位置"
                clearable
              />
            </n-form-item>
            <n-form-item label="会议室位置：" path="inputValueDescription">
              <n-input
                v-model:value="model.inputValueDescription"
                placeholder="请输入会议室类型"
                clearable
              />
            </n-form-item>
            <div class="float-right">
              <n-button type="info" ghost @click="handleValidateButtonClick">新增会议室 </n-button>
            </div>
          </n-form>
        </n-tab-pane>
        <n-tab-pane name="oasis" tab="修改会议室">
          <n-space vertical>
            <n-select
              :options="snopt"
              v-model:value="optionsValue"
              :style="{ width: '42%' }"
            /> </n-space
          ><br />
          会议室位置：
          <NInput
            :style="{ width: '35%' }"
            type="text"
            v-model:value="valw"
            clearable
            :allow-input="noSideSpace"
          />
          <br /><br />
          会议室型号：
          <NInput
            :style="{ width: '35%' }"
            type="text"
            v-model:value="valx"
            clearable
            :allow-input="noSideSpace"
          /><br />
          <div class="float-right">
            <n-button type="info" ghost @click="handlePositiveClick">修改会议室 </n-button>
          </div>
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </div>
</template>
